<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const toLogin = () => {
  router.push("/login");
};

const navItems = ref([
  { title: "首页", path: "/" },
  { title: "攻略中心", path: "/guides" },
  { title: "社区讨论", path: "/community" },
  { title: "资料库", path: "/wiki" },
  { title: "主页", path: "/profile" },
]);

</script>

<template>
  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="container navbar-content">
      <div class="navbar-brand">
        <img
          class="navbar-logo"
          src="/ODLS.png"
          alt="星露谷论坛"
        />
        <span class="navbar-title">星露谷论坛</span>
      </div>
      <div class="navbar-nav">
        <router-link
          v-for="(item, index) in navItems"
          :key="index"
          :to="item.path"
          class="nav-link"
          active-class="active"
        >
          {{ item.title }}
        </router-link>
      </div>
      <button class="login-btn" @click="toLogin">登录/注册</button>
    </div>
  </nav>
</template>

<style scoped></style>
